import { getTemplateGroupList } from '/@/api/gen/templateGroup';
import { FormSchema } from '/@/components/Form';
import { BasicColumn } from '/@/components/Table';
import { defineComponent, h, ref } from 'vue';
import { Button, Checkbox, Input, Select } from 'ant-design-vue';
import OptionModal from '/@/views/gen/gencode/OptionModal.vue';
import { useModal } from '/@/components/Modal';

//按钮组件
const OptionButtonComp = defineComponent({
  components: { OptionModal, Button },
  props: {
    fieldDict: {
      type: Array,
      default: () => [],
    },
  },
  emits: ['update:fieldDict'],
  setup(props, { emit }) {
    const [register, { openModal }] = useModal();

    function handleEdit() {
      openModal(true, {
        dict: props.fieldDict,
      });
    }

    function onSuccess(values) {
      emit('update:fieldDict', values);
    }

    return {
      register,
      handleEdit,
      onSuccess,
    };
  },
  template: `
    <div>
    <Button @click="handleEdit">{{ fieldDict.length > 0 ? '编辑字典' : '新增字典' }}</Button>
    <OptionModal @register="register" @success="onSuccess"></OptionModal>
    </div>
  `,
});

export const baseFormSchema: FormSchema[] = [
  {
    field: 'moduleDirId',
    label: '模块目录',
    component: 'ApiTreeSelect',
    slot: 'moduleDirId',
    required: true,
    // defaultValue: 0,
    // componentProps: {
    //   replaceFields: { children: 'children', label: 'menuName', key: 'id', value: 'id' },
    //   onChange: (value, label, extra) => {
    //     console.log(value, label, extra);
    //   },
    //   api: () => {
    //     console.log('获取菜单目录api模拟执行');
    //     return getMenuDir().then((res) => {
    //       return [
    //         {
    //           menuName: '根模块目录',
    //           key: 0,
    //           id: 0,
    //           children: res,
    //         },
    //       ];
    //     });
    //   },
    // },
    colProps: { span: 8 },
  },
  {
    field: 'moduleName',
    label: '模块名称（EN）',
    component: 'Input',
    required: true,
    defaultValue: 'default',
    componentProps: {
      placeholder: '请输入模块名称',
    },
    colProps: { span: 8 },
  },
  {
    field: 'moduleNameZh',
    label: '模块名称（ZH）',
    required: true,
    component: 'Input',
    defaultValue: 'default',
    componentProps: {
      placeholder: '请输入模块中文名称',
    },
    colProps: { span: 8 },
  },
  {
    field: 'businessName',
    label: '业务名称',
    required: true,
    component: 'Input',
    componentProps: {
      placeholder: '请输入业务名称',
    },
    colProps: { span: 8 },
  },
  {
    field: 'genMode',
    label: '生成模式',
    component: 'RadioButtonGroup',
    defaultValue: 'inner',
    required: true,
    componentProps: {
      options: [
        { label: '压缩包（zip）', value: 'zip' },
        { label: '根据路径', value: 'inner' },
      ],
    },
    colProps: { span: 8 },
  },
  {
    field: 'zipName',
    label: '压缩包名称',
    component: 'Input',
    required: (params) => {
      return params.model.genMode === 'zip';
    },
    defaultValue: 'AgileFastFK3.0',
    show: (params) => {
      return params.model.genMode === 'zip';
    },
    componentProps: {
      placeholder: '请输入压缩包名称',
    },
    colProps: { span: 8 },
  },
  {
    field: 'removeTablePrefix',
    label: '去除表前缀',
    component: 'RadioGroup',
    defaultValue: true,
    required: true,
    componentProps: {
      options: [
        { label: '不去除', value: false },
        { label: '去除', value: true },
      ],
    },
    colProps: { span: 8 },
  },
  {
    field: 'tablePrefixName',
    label: '表前缀',
    component: 'Input',
    show: (params) => {
      return params.model.removeTablePrefix === true;
    },
    required: (params) => {
      return params.model.removeTablePrefix === true;
    },
    componentProps: {
      placeholder: '请输入表前缀',
    },
    colProps: { span: 8 },
  },

  {
    field: 'outputType',
    label: '输出类型',
    component: 'Input',
    defaultValue: 'file',
    show: false,
    componentProps: {
      placeholder: '请输入输出类型',
    },
    colProps: { span: 8 },
  },
  {
    field: 'apiPrefix',
    label: '生成接口前缀',
    componentProps: {
      placeholder: '请输入生成接口前缀',
    },
    component: 'Input',
    defaultValue: '/v1/api',
    colProps: { span: 8 },
  },
  {
    field: 'packageName',
    label: '生成主包名（io.xx.modules）',
    component: 'Input',
    defaultValue: 'io.agilefast.modules',
    required: true,
    componentProps: {
      placeholder: '请输入输java包名',
    },
    colProps: { span: 8 },
  },

  {
    field: 'idType',
    label: 'ID生成策略',
    required: true,
    component: 'Select',
    defaultValue: 'AUTO',
    componentProps: {
      options: [
        { label: '自增', value: 'AUTO' },
        { label: '未设置主键', value: 'NONE' },
        { label: '手动输入', value: 'INPUT' },
        { label: '全局唯一ID', value: 'ASSIGN_ID' },
        { label: '全局唯一UUID', value: 'ASSIGN_UUID' },
        // { label: '雪花算法', value: 'xxx' },
      ],
    },
    colProps: { span: 8 },
  },
  {
    field: 'templateGroupId',
    label: '模板组',
    component: 'ApiSelect',
    // defaultValue: 1,
    required: true,
    componentProps: {
      placeholder: '请选择模板组',
      api: getTemplateGroupList,
      labelField: 'groupName',
      valueField: 'templateGroupId',
    },
    colProps: { span: 8 },
  },
  {
    field: 'version',
    label: '版本号',
    component: 'Input',
    defaultValue: 'v1.0.0',
    required: true,
    componentProps: {
      placeholder: '请输入版本号',
    },
    colProps: { span: 8 },
  },
  {
    field: 'author',
    label: '作者',
    component: 'Input',
    defaultValue: 'yaolonga',
    required: true,
    componentProps: {
      placeholder: '请输入作者',
    },
    colProps: { span: 8 },
  },
  {
    field: 'afterEndParentPath',
    label: '生成根路径（后端）',
    component: 'Input',
    defaultValue: 'agilefast-platform/agilefast-gen-api/src/main',
    componentProps: {
      placeholder: '请输入后端文件生成路径',
    },
    show: (params) => {
      return params.model.genMode === 'inner';
    },
    required: true,
    colProps: { span: 8 },
  },
  {
    field: 'frontEndParentPath',
    label: '生成根路径（前端）',
    defaultValue: 'J:\\',
    componentProps: {
      placeholder: '请输入前端文件生成路径',
    },
    component: 'Input',
    show: (params) => {
      return params.model.genMode === 'inner';
    },
    required: true,
    colProps: { span: 8 },
  },
  {
    field: 'sqlParentPath',
    label: '生成根路径（SQL）',
    defaultValue: 'J:\\',
    show: (params) => {
      return params.model.genMode === 'inner';
    },
    componentProps: {
      placeholder: '请输入SQL文件生成路径',
    },
    component: 'Input',
    required: true,
    colProps: { span: 8 },
  },
  {
    field: 'otherParentPath',
    label: '生成根路径（其他）',
    show: (params) => {
      return params.model.genMode === 'inner';
    },
    defaultValue: 'J:\\',
    componentProps: {
      placeholder: '请输入其他文件生成路径',
    },
    component: 'Input',
    colProps: { span: 8 },
  },
];

export const pageFormSchema: FormSchema[] = [
  {
    field: 'isBatch',
    label: '批量功能',
    component: 'Switch',
    defaultValue: true,
    required: true,
    colProps: { span: 4 },
  },
  {
    field: 'isPage',
    label: '分页功能',
    component: 'Switch',
    defaultValue: true,
    required: true,
    colProps: { span: 4 },
  },
  {
    field: 'showAddBtn',
    label: '新增按钮',
    component: 'Switch',
    defaultValue: true,
    required: true,
    colProps: { span: 4 },
  },
  {
    field: 'showDelBtn',
    label: '删除按钮',
    component: 'Switch',
    defaultValue: true,
    required: true,
    colProps: { span: 4 },
  },
  {
    field: 'showExportBtn',
    label: '导出按钮',
    component: 'Switch',
    defaultValue: true,
    required: true,
    colProps: { span: 4 },
  },
  {
    field: 'showImportBtn',
    label: '导入按钮',
    component: 'Switch',
    defaultValue: true,
    required: true,
    colProps: { span: 4 },
  },
  {
    field: 'showUpdateBtn',
    label: '编辑按钮',
    component: 'Switch',
    defaultValue: true,
    required: true,
    colProps: { span: 4 },
  },
  {
    field: 'pid',
    label: '菜单上级目录', //同moduleDirId
    component: 'ApiTreeSelect',
    required: false,
    defaultValue: 0,
    show: false,
    colProps: { span: 8 },
  },
  {
    field: 'sort',
    label: '生成菜单序号',
    component: 'Input',
    required: true,
    componentProps: {
      placeholder: '请输入菜单序号',
    },
    colProps: { span: 8 },
  },
  {
    field: 'updateOrCreateEditComponent',
    label: '新增/编辑组件',
    component: 'RadioGroup',
    defaultValue: 'Modal',
    required: true,
    componentProps: {
      options: [
        { label: '抽屉', value: 'Drawer' },
        { label: '模态框', value: 'Modal' },
      ],
    },
    colProps: { span: 8 },
  },
];

export const fieldColumns: BasicColumn[] = [
  {
    title: '字段名称',
    dataIndex: 'field',
    width: 150,
    align: 'center',
  },
  {
    title: '字段注释',
    dataIndex: 'comment',
    width: 150,
    align: 'center',
    customRender: ({ record }) =>
      h(Input, {
        value: record.comment,
        placeholder: '请修改字段描述',
        'onUpdate:value': (newValue) => (record.comment = newValue),
      }),
  },
  {
    title: '字段类型',
    dataIndex: 'type',
    width: 110,
    align: 'center',
  },
  {
    title: 'java类型',
    dataIndex: 'javaType',
    width: 110,
    align: 'center',
  },
  // {
  //   title: 'ts类型',
  //   dataIndex: 'tsType',
  //   width: 110,
  //   align: 'center',
  //   customRender: ({ record }) =>
  //     h(Input, {
  //       value: record.tsType,
  //       placeholder: '请修改字ts类型',
  //       'onUpdate:value': (newValue) => (record.tsType = newValue),
  //     }),
  // },
  {
    title: 'ts类型',
    dataIndex: 'tsType',
    width: 110,
    align: 'center',
    customRender: ({ record }) => {
      const options = [
        { label: 'string', value: 'string' },
        { label: 'number', value: 'number' },
        { label: 'boolean', value: 'boolean' },
        { label: 'Object', value: 'Object' },
        { label: 'Array', value: 'Array' },
        { label: 'any', value: 'any' },
        { label: 'Date', value: 'Date' },
        { label: 'Map', value: 'Map' },
        { label: 'Set', value: 'Set' },
      ];
      return h(Select, {
        options,
        value: record.tsType,
        'onUpdate:value': (newValue) => (record.tsType = newValue),
        style: {
          width: '100%',
        },
      });
    },
  },
  {
    title: '组件类型',
    dataIndex: 'componentType',
    width: 150,
    align: 'center',
    customRender: ({ record }) => {
      const options = [
        { label: '普通输入框', value: 'Input' },
        // { label: '输入框组', value: 'InputGroup' },
        { label: '密码输入框', value: 'InputPassword' },
        { label: '搜索框', value: 'InputSearch' },
        { label: '文本域', value: 'InputTextArea' },
        { label: '数字输入框', value: 'InputNumber' },
        // { label: '自定义', value: 'InputCountDown' },
        { label: '普通选择器', value: 'Select' },
        { label: 'Api选择器', value: 'ApiSelect' },
        { label: '树形选择器', value: 'TreeSelect' },
        { label: 'Api树形选择器', value: 'ApiTreeSelect' },
        { label: '单选框按钮组', value: 'RadioButtonGroup' },
        { label: '单选框组', value: 'RadioGroup' },
        { label: '复选框', value: 'Checkbox' },
        { label: '复选框组', value: 'CheckboxGroup' },
        { label: '级联选择器', value: 'Cascader' },
        { label: '日期选择器', value: 'DatePicker' },
        { label: '范围选择器', value: 'RangePicker' },
        { label: '周选择器', value: 'WeekPicker' },
        { label: '时间选择器', value: 'TimePicker' },
        { label: '月选择器', value: 'MonthPicker' },
        { label: '图标选择器', value: 'IconPicker' },
        { label: '实时搜索框', value: 'AutoComplete' },
        { label: 'Switch组件', value: 'Switch' },
        { label: '文件上传', value: 'Upload' },
        { label: '评分组件', value: 'Rate' },
        { label: '头像组件', value: 'Avatar' },
      ];

      return h(Select, {
        options,
        value: record.componentType,
        'onUpdate:value': (newValue) => (record.componentType = newValue),
      });
    },
  },
  {
    title: '字典类型',
    dataIndex: 'dictType',
    width: 150,
    align: 'center',
    customRender: ({ record }) => {
      const options = [
        { label: 'API获取', value: 'api' },
        { label: '自定义', value: 'custom' },
        { label: '暂无', value: 'none' },
      ];
      const disabled = ![
        'Select',
        'TreeSelect',
        'RadioButtonGroup',
        'CheckboxGroup',
        'RadioGroup',
      ].includes(record.componentType);
      disabled && (record.dictType = 'none');
      return h(Select, {
        options,
        disabled,
        value: record.dictType,
        'onUpdate:value': (newValue) => (record.dictType = newValue),
        style: {
          width: '100%',
        },
      });
    },
  },
  {
    title: '字典Options',
    dataIndex: 'fieldDict',
    width: 110,
    align: 'center',
    customRender: ({ record }) => {
      const condition = [
        'Select',
        'TreeSelect',
        'RadioButtonGroup',
        'CheckboxGroup',
        'RadioGroup',
      ].includes(record.componentType);

      if (condition && record.dictType === 'custom') {
        return h(OptionButtonComp, {
          fieldDict: record.fieldDict,
          'onUpdate:fieldDict': (newValue) => {
            console.log(newValue);
            record.fieldDict = newValue;
          },
        });
      } else if (record.dictType === 'api') {
        //TODO API获取字典
        return 'api待开发';
      } else {
        return '暂无';
      }
    },
  },
  {
    title: '校验规则',
    dataIndex: 'checkRule',
    customRender: ({ record }) => {
      const options = ref([
        { label: '手机', value: '0?(13|14|15|18|17)[0-9]{9}' },
        { label: '固定电话', value: '[0-9-()（）]{7,18}' },
        { label: '邮箱', value: 'w[-w.+]*@([A-Za-z0-9][-A-Za-z0-9]+.)+[A-Za-z]{2,14}' },
        { label: 'qq', value: '[1-9]([0-9]{4,10})' },
        { label: '邮编', value: 'd{6}' },
        {
          label: '身份证',
          value:
            '^[1-9]\\d{5}(18|19|([23]\\d))\\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\\d{3}[0-9Xx]$',
        },
        { label: '日期', value: 'd{4}(-|/|.)d{1,2}\\1d{1,2}' },
        { label: 'url', value: '^((https|http|ftp|rtsp|mms)?://)[^s]+' },
        {
          label: 'ip',
          value:
            '(25[0-5]|2[0-4]d|[0-1]d{2}|[1-9]?d).(25[0-5]|2[0-4]d|[0-1]d{2}|[1-9]?d).(25[0-5]|2[0-4]d|[0-1]d{2}|[1-9]?d).(25[0-5]|2[0-4]d|[0-1]d{2}|[1-9]?d)',
        },
        { label: '暂无', value: '' },
      ]);

      return h(Select, {
        placeholder: '请选择校验规则',
        notFoundContent: null,
        filterOption: true,
        options: options.value,
        value: record.checkRule,
        'onUpdate:value': (newValue) => (record.checkRule = newValue),
        style: {
          width: '100%',
        },
      });
    },
    width: 110,
    align: 'center',
  },
  {
    title: '必填',
    dataIndex: 'required',
    customRender: ({ record }) =>
      h(Checkbox, {
        checked: record.required,
        'onUpdate:checked': (newValue) => (record.required = newValue),
      }),
    width: 60,
    align: 'center',
  },
  {
    title: '列生成',
    dataIndex: 'isGenColumn',
    customRender: ({ record }) =>
      h(Checkbox, {
        checked: record.isGenColumn,
        'onUpdate:checked': (newValue) => (record.isGenColumn = newValue),
      }),
    width: 90,
    align: 'center',
  },
  {
    title: '列显示',
    dataIndex: 'showTableColumn',
    customRender: ({ record }) =>
      h(Checkbox, {
        checked: record.showTableColumn,
        'onUpdate:checked': (newValue) => (record.showTableColumn = newValue),
      }),
    width: 80,
    align: 'center',
  },
  {
    title: '增改生成',
    dataIndex: 'isGenFieldByUpdateOrCreate',
    customRender: ({ record }) =>
      h(Checkbox, {
        checked: record.isGenFieldByUpdateOrCreate,
        'onUpdate:checked': (newValue) => (record.isGenFieldByUpdateOrCreate = newValue),
      }),
    width: 80,
    align: 'center',
  },
  {
    title: '增改显示',
    dataIndex: 'isShowFieldByUpdateOrCreate',
    customRender: ({ record }) =>
      h(Checkbox, {
        checked: record.isShowFieldByUpdateOrCreate,
        'onUpdate:checked': (newValue) => (record.isShowFieldByUpdateOrCreate = newValue),
      }),
    width: 80,
    align: 'center',
  },
  {
    title: '禁用',
    dataIndex: 'isDisableField',
    customRender: ({ record }) =>
      h(Checkbox, {
        checked: record.isDisableField,
        'onUpdate:checked': (newValue) => (record.isDisableField = newValue),
      }),
    width: 60,
    align: 'center',
  },
  {
    title: '搜索',
    dataIndex: 'isQuery',
    customRender: ({ record }) => {
      return h(Checkbox, {
        checked: record.isQuery,
        onChange: (val) => {
          if (val.target.checked) {
            record.queryModeSelect = 'like';
          }
        },
        'onUpdate:checked': (newValue) => (record.isQuery = newValue),
      });
    },
    width: 60,
    align: 'center',
  },
  {
    title: '搜索模式',
    dataIndex: 'queryModeSelect',
    width: 120,
    align: 'center',
    customRender: ({ record }) => {
      const options = [
        { label: '模糊', value: 'like' },
        { label: '右模糊', value: 'likeRight' },
        { label: '左模糊', value: 'likeLeft' },
        { label: '模糊不包含', value: 'notLike' },
        { label: '全等', value: 'eq' },
        { label: '不等于', value: 'ne' },
        { label: '大于等于', value: 'ge' },
        { label: '大于', value: 'gt' },
        { label: '小于等于', value: 'le' },
        { label: '小于', value: 'lt' },
        { label: '暂无', value: 'none' },
      ];
      !record.isQuery && (record.queryModeSelect = 'none');
      return h(Select, {
        options,
        disabled: !record.isQuery,
        value: record.queryModeSelect,
        style: {
          width: '100%',
        },
        'onUpdate:value': (newValue) => (record.queryModeSelect = newValue),
      });
    },
  },
];
